<script setup>
import { computed,ref } from 'vue';
import feedList from './components/feed-list.vue'
import doctorList from './components/doctor-list.vue'
import { feedListAPI ,doctorListAPI} from '@/apis/doctor.js'
// 获取安全区域数据
const { safeAreaInsets } = uni.getSystemInfoSync()
// 标签页索引值
const tabIndex = ref(0)
// 标签页数据
const feedTabs = ref([
  {
      label: '推荐',
      type: 'recommend',
      current: 1,
      hasMore: true,
      list: [],
      rendered: true
    },
    {
      label: '关注',
      type: 'like',
      current: 1,
      hasMore: true,
      list: [],
      rendered: false
    },
    {
      label: '减脂',
      type: 'fatReduction',
      current: 1,
      hasMore: true,
      list: [],
      rendered: false
    },
    {
      label: '饮食',
      type: 'food',
      current: 1,
      hasMore: true,
      list: [],
      rendered: false
    }
])
//记录type
const feedType = computed(()=>feedTabs.value[tabIndex.value].type)
//记录当前页码
const feedCurrent = computed(()=>feedTabs.value[tabIndex.value].current)
//每一页显示的数据数量
const feedPageSize = ref(5)

// 切换标签页
function onFeedTabChange({ index }) {
  tabIndex.value = index
  //判断有没有发送过请求
  if(feedTabs.value[index].rendered === false){
  	getfeedList()
  }
  // 做组件缓存 看这个组件是否已经被渲染过了
	feedTabs.value[index].rendered = true
}

//获取首页知识列表
const getfeedList = async() => {
	//开始请求数据
	uni.showLoading({
		title:'正在加载...',
	})
	const res = await feedListAPI({
		type:feedType.value,
		current:feedCurrent.value,
		pageSize:feedPageSize.value
	})
	uni.hideLoading();
	// console.log(res,1111)
	const list = feedTabs.value[tabIndex.value].list
	//把数据追加到原来的数组里面
	feedTabs.value[tabIndex.value].list = [...list, ...res.data.rows]
	// console.log(list,999999999)
	//列表页数据的页码
	const current = feedTabs.value[tabIndex.value].current
	//更新页码
	feedTabs.value[tabIndex.value].current = current + 1
	//判断是否有更多数据
	feedTabs.value[tabIndex.value].hasMore = current + 1 <= res.data.pageTotal
}
// 渲染默认标签页数据
getfeedList()

//滚动到底部是触发加载跟多数据
const onScrolltolower = () => {
	// console.log(222222)
	//如果feedTabs里面的数组元素的hasMore的值为true就表示还有更多数据去加载
	if(feedTabs.value[tabIndex.value].hasMore) getfeedList()
}

// 推荐医生列表数据
const doctorItems = ref([])
//获取推荐医生列表
const getDoctorList = async() => {
	const res = await doctorListAPI()
	// console.log(res,88888888)
	doctorItems.value = res.data.rows
}
//调用获取推荐医生列表函数
getDoctorList()
</script>
<template>
  <scroll-page @scrolltolower="onScrolltolower">
    <view
      class="index-page"
      :style="{ backgroundPositionY: -48 + safeAreaInsets.top + 'px' }"
    >
      <!-- 页面导航 -->
      <view
        :style="{ paddingTop: safeAreaInsets.top + 'px' }"
        class="page-navbar"
        >优医</view
      >

      <!-- 搜索栏 -->
      <view class="search-bar">
        <input
          placeholder-class="input-placeholder"
          placeholder="搜一搜: 疾病/症状/医生/健康知识"
          class="input"
          type="text"
        />
        <view class="icon-search">
          <uni-icons size="22" color="#C3C3C5" type="search" />
        </view>
      </view>
      <!-- 快速入口 -->
      <view class="quick-entry">
        <navigator hover-class="none" class="quick-entry-item">
          <image
            class="quick-entry-icon"
            src="/static/images/quick-entry-1.png"
          />
          <text class="label">问医生</text>
          <text class="small">按科室查问医生</text>
        </navigator>
        <navigator
          hover-class="none"
          class="quick-entry-item"
          url="/subpkg_consult/quickly/index?type=2"
        >
          <image
            class="quick-entry-icon"
            src="/static/images/quick-entry-2.png"
          />
          <text class="label">极速问诊</text>
          <text class="small">20s医生极速回复</text>
        </navigator>
        <navigator hover-class="none" class="quick-entry-item">
          <image
            class="quick-entry-icon"
            src="/static/images/quick-entry-3.png"
          />
          <text class="label">开药门诊</text>
          <text class="small">线上买药更方便</text>
        </navigator>
      </view>
      <!-- 快速查看 -->
      <view class="quick-view">
        <navigator
          hover-class="none"
          class="quick-view-item"
          url="/subpkg_medicine/order_list/index"
        >
          <image
            class="quick-view-icon"
            src="/static/images/quick-view-1.png"
          />
          <text class="label">药品订单</text>
        </navigator>
        <navigator
          hover-class="none"
          class="quick-view-item"
          url="/subpkg_archive/list/index"
        >
          <image
            class="quick-view-icon"
            src="/static/images/quick-view-2.png"
          />
          <text class="label">健康档案</text>
        </navigator>
        <navigator hover-class="none" class="quick-view-item">
          <image
            class="quick-view-icon"
            src="/static/images/quick-view-3.png"
          />
          <text class="label">我的处方</text>
        </navigator>
        <navigator hover-class="none" class="quick-view-item">
          <image
            class="quick-view-icon"
            src="/static/images/quick-view-4.png"
          />
          <text class="label">疾病查询</text>
        </navigator>
      </view>
      <!-- 广告位 -->
      <view class="banner-placeholder">
        <swiper
          class="uni-swiper"
          indicator-dots
          indicator-color="#ffffff99"
          indicator-active-color="#fff"
          circular
        >
          <swiper-item>
            <navigator hover-class="none" class="navigator" url=" ">
              <image class="banner-image" src="/static/images/banner-1.png" />
            </navigator>
          </swiper-item>
          <swiper-item>
            <navigator hover-class="none" class="navigator" url=" ">
              <image
                class="banner-image"
                src="/static/images/banner-1.png"
                mode="aspectFill"
              />
            </navigator>
          </swiper-item>
        </swiper>
      </view>
	  <!-- 标签切换 -->
			<view
				class="doctor-feeds"
				:style="{ marginTop: -safeAreaInsets.top + 'px' }"
			>
				<custom-sticky :offset-top="safeAreaInsets.top + 'px'">
					<custom-tabs @click="onFeedTabChange" :list="feedTabs" />
				</custom-sticky>
				<!-- 关注知识列表 -->
				<view v-for='(item,index) in feedTabs' :key="item.type" v-show="index === tabIndex">
					<!-- 推荐医生列表 -->
					<doctor-list :list="doctorItems" v-show="feedType === 'recommend'"></doctor-list>
					<!-- 知识列表 -->
					<feed-list v-if="item.rendered" :list='item.list'></feed-list>
				</view>
			</view>
      <!-- 标签页列表 -->
    </view>
  </scroll-page>
</template>
<style lang="scss">
@import './index.scss';
</style>